<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="common.css">
</head>
<body>
  <div class="toolbar">
    <button value="dark">dark</button>
    <button value="calm">calm</button>
    <button value="light">light</button>
  </div>
  <h2>Stackoverflow Question</h2>
	I would like to use an external javascript file in another javascript file. For example, I could store all my global variables
  in a globals.js file and then call then from the website logic logic.js. Then in the index.html, i would insert the tag.
  How do I use the globals.js inside the logic.js?

  <h2>Stackoverflow Answer</h2>
  Javascript doesn't have any implicit "include this other file" mechanisms, like css's @include. You just have to list your
  globals file before the logic file in the tags:

  <pre><code>
  script type="text/javascript" src="globals.js"
  </code></pre>
  If guaranteeing that the globals are available before anything in the logic file fires up, you can do a slow polling loop
  to see if some particular variable is available before calling an init() or whatever function.
  <script>
    const root = document.documentElement;
    // console.log(root);
    const themeBtns = document.querySelectorAll('button');
    themeBtns.forEach(btn =>{
      btn.addEventListener('click', handleThemeUpdate);
    })
    function handleThemeUpdate(e) {
      // console.log(e.target.value);
      // JS 可以去操作css JS是王者
      // querySelectorAll creatElement
      // css.style.
      switch(e.target.value) {
        case "dark": 
          root.style.setProperty("--bg", "black");
          root.style.setProperty("--bg-text", "white");
          break;
        case "calm": 
          root.style.setProperty("--bg", "#abaa11");
          root.style.setProperty("--bg-text", "#fff");
          break;
        case "light": 
          root.style.setProperty("--bg", "black");
          root.style.setProperty("--bg-text", "white");
          break;
      }
    }
  </script>
</body>
</html>